<template>
	<view>
		<Header :showBack="false" title="我的" ></Header>
		<view class="top">
			<view>
				<open-data style="width: 100%; height: 100%;" type="userAvatarUrl"></open-data>
			</view>
			<view>
				{{name}}
				<!-- <open-data type="userNickName"></open-data> -->
			</view>
		</view>
		<view class="order">
			<view>
				<view>我的订单</view>
				<view @click="toOrder(0)">查看全部订单<image src="../static/img/go.png" mode=""></image></view>
			</view>
			
			<view>
				<view @click="toOrder(1)">
					<image src="../static/img/daizhifu.png" mode=""></image>
					<view>待支付</view>
				</view>
				<view @click="toOrder(2)">
					<image src="../static/img/daifahuo.png" mode=""></image>
					<view>待发货</view>
				</view>
				<view @click="toOrder(3)">
					<image src="../static/img/daiquhuo.png" mode=""></image>
					<view>已配送</view>
				</view>
				<view @click="toOrder(0)">
					<image src="../static/img/tuikuan.png" mode=""></image>
					<view>全部</view>
				</view>
			</view>
		</view>
		
		<view class="mune">
			<view @click="toAddress">
				<image src="../static/dizhi.png" mode=""></image>
				<view>取货地址</view>
			</view>
			<!-- <view>
				<image src="../static/jiaoyi.png" mode=""></image>
				<view>交易记录</view>
			</view> -->
			<view @click="callPhone">
				<image src="../static/kefu.png" mode=""></image>
				<view>联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:uni.getStorageSync('info').ownerName
			}
		},
		methods: {
			callPhone(){
				uni.makePhoneCall({
				    phoneNumber: uni.getStorageSync('info').organizationPhone
				});
			},
			toAddress(){
				uni.navigateTo({
					url:'/pages/shopMall/address'
				})
			},
			toOrder(index){
				uni.navigateTo({
					url:'/pages/shopMall/order?index='+index
				})
			}
		}
	}
</script>

<style scoped lang="less">
.tongyong(){
	background-color: #FFFFFF;
	width: 710upx;
	margin: 20upx;
	border-radius: 4upx;
}
.top{
	width: 100%;
	display: flex;
	align-items: center;
	height: 150upx;
	>view:first-child{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		margin: 0 30upx;
	}
}
.order{
	.tongyong;
	>view:first-child{
		padding: 40upx 30upx 0;
		display: flex;
		justify-content: space-between;
		height: 50upx;
		line-height: 50upx;
		>view:first-child{
			font-weight: 500;
			font-size: 32upx;
		}
		>view:last-child{
			font-weight: 300;
			font-size: 26upx;
			color: #888888;
			display: flex;
			align-items: center;
			>image{
				width: 26upx;
				height: 26upx;
			}
		}
	}
	>view:last-child{
		display: flex;
		margin-top: 50upx;
		padding-bottom: 40upx;
		>view{
			width: 25%;
			text-align: center;
			>image{
				width: 50upx;
				height: 50upx;
				margin-bottom: 10upx;
			}
			>view{
				font-size: 26upx;
				color: #666666;
			}
		}
	}
}
.mune{
	.tongyong;
	display: flex;
	padding: 50upx 0;
	>view{
		width: 25%;
		text-align: center;
		>image{
			width: 50upx;
			height: 50upx;
			margin-bottom: 10upx;
		}
		>view{
			font-size: 26upx;
			color: #666666;
		}
	}
}
</style>
